﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<%@ Import Namespace="NetflixCatalog" %>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace=" System.Linq" %>
<script runat="server">
    [WebMethod]
    public static IEnumerable GetModels()
    {
        NetflixCatalog catalog = new NetflixCatalog(new Uri("http://odata.netflix.com/Catalog/"));
        return catalog.Titles.Take(50).ToArray().OrderByDescending(t => t.ReleaseYear).GroupBy(t => t.ReleaseYear).Select(t => new { ReleaseYear = t.Key, Sub = t });
    }
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Nested repeater
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    Use two templates and <span>page_updated</span> function to implement nested repeater
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <style type="text/css">
        div.name
        {
            text-decoration: underline;
            font-size: 20px;
        }
        
        #Container > div
        {
            border: 3px solid #888;
            margin-bottom: 10px;
            padding: 10px;
        }
        
        #Container table td
        {
            padding: 8px;
        }
    </style>
    <div class="PaginationContainer">
    </div>
    <br style="clear: both;" />
    <div id="Container">
    </div>
    <div class="PaginationContainer">
    </div>
    <br style="clear: both;" />
    <%--The template for the outer repeater--%>
    <div id="template" style="display: none">
        {#foreach $T as d}
        <div>
            <div class="name">
                Release Year: {$T.d.ReleaseYear}</div>
            <br />
            <div id="c{$T.d$index}">
            </div>
            <br />
            <div id="p{$T.d$index}">
            </div>
            <br style="clear: both;" />
        </div>
        {#/for}
    </div>
    <%--The template for the inner repeater--%>
    <textarea id="subtemplate" style="display: none">
        <table>
            <tr>
                <th>
                </th>
                <th>
                    Name
                </th>
                <th>
                    Synopsis
                </th>
            </tr>
            {#foreach $T as d}
            <tr class="{#cycle values=['odd','even']}">
                <td>
                    {$T.d$index + 1}
                </td>
                <td>
                    <a href="{$T.d.Url}">{$T.d.Name}</a>
                </td>
                <td>
                    {$d.string.truncate($T.d.Synopsis, 110)}
                </td>
            </tr>
            {#/for}
        </table>
    </textarea>
    <br style="clear: both;" />
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    <script type="text/javascript">
        $(function () {
            $.doPostback("GetModels", {}, {
                callback: function (data) {
                    $("#Container").dataBind($("#template").html(), data.d, {
                        page_container: ".PaginationContainer",
                        page_size: 3,
                        //implement the nested repeater in page updated function
                        page_updated: function (e) {
                            for (i = 0; i < e.page_data.length; i++) {
                                $("#c" + i).dataBind($("#subtemplate").text(), e.page_data[i].Sub, {
                                    page_container: "#p" + i,
                                    page_size: 3
                                });
                            }
                        }
                    });
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
         $(function () {
            $.doPostback("GetModels", {}, {
                callback: function (data) {
                    $("#Container").dataBind($("#template").html(), data.d, {
                        page_container: ".PaginationContainer",
                        page_size: 3,
                        //implement the nested repeater in page updated function
                        page_updated: function (e) {
                            for (i = 0; i < e.page_data.length; i++) {
                                $("#c" + i).dataBind($("#subtemplate").text(), e.page_data[i].Sub, {
                                    page_container: "#p" + i,
                                    page_size: 3
                                });
                            }
                        }
                    });
                }
            });
        });
    </pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols">
    &lt;div class=&quot;PaginationContainer&quot;&gt;
    &lt;/div&gt;
    &lt;br style=&quot;clear: both;&quot; /&gt;
    &lt;div id=&quot;Container&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;PaginationContainer&quot;&gt;
    &lt;/div&gt;
    &lt;br style=&quot;clear: both;&quot; /&gt;
    &lt;%--The template for the outer repeater--%&gt;
    &lt;div id=&quot;template&quot; style=&quot;display: none&quot;&gt;
        {#foreach $T as d}
        &lt;div&gt;
            &lt;div class=&quot;name&quot;&gt;
                Release Year: {$T.d.ReleaseYear}&lt;/div&gt;
            &lt;br /&gt;
            &lt;div id=&quot;c{$T.d$index}&quot;&gt;
            &lt;/div&gt;
            &lt;br /&gt;
            &lt;div id=&quot;p{$T.d$index}&quot;&gt;
            &lt;/div&gt;
            &lt;br style=&quot;clear: both;&quot; /&gt;
        &lt;/div&gt;
        {#/for}
    &lt;/div&gt;
    &lt;%--The template for the inner repeater--%&gt;
    &lt;textarea id=&quot;subtemplate&quot; style=&quot;display: none&quot;&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;th&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    Name
                &lt;/th&gt;
                &lt;th&gt;
                    Synopsis
                &lt;/th&gt;
            &lt;/tr&gt;
            {#foreach $T as d}
            &lt;tr class=&quot;{#cycle values=[&#39;odd&#39;,&#39;even&#39;]}&quot;&gt;
                &lt;td&gt;
                    {$T.d$index + 1}
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;a href=&quot;{$T.d.Url}&quot;&gt;{$T.d.Name}&lt;/a&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    {$d.string.truncate($T.d.Synopsis, 110)}
                &lt;/td&gt;
            &lt;/tr&gt;
            {#/for}
        &lt;/table&gt;
    &lt;/textarea&gt;
    &lt;br style=&quot;clear: both;&quot; /&gt;
    </pre>
</asp:Content>
